<template>
  <div :ref="ref" :style="{ width: width, height: height }"></div>
</template>
<script>
import resize from "./mixins/resize";
import "./map/js/china";

export default {
  name: "Chart",
  mixins: [resize],
  props: {
    basicOption: {
      type: Object,
      default: () => {},
    },
    mapOptions: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      city: "",
      ref: this.basicOption.ref || "mychart",
      width: this.basicOption.width || "100%",
      height: this.basicOption.height || "400px",
      isGotoCity: this.basicOption.isGotoCity || false, //是否下钻到市县
      mapOption: {
        backgroundColor: "#fff",
        title: {
          text: "",
          x: "20",
          y: "20",
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "#ccc",
          borderWidth: 0,
          padding: 5,
          itemGap: 10,
          subtext: "",
          textStyle: {
            fontSize: 18,
            fontWeight: "bolder",
            color: "#333",
          },
          subtextStyle: {
            color: "#aaa",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "",
          showDelay: 20,
          hideDelay: 100,
          transitionDuration: 0.4,
          backgroundColor: "rgba(0,0,0,0.7)",
          borderColor: "#333",
          borderRadius: 4,
          borderWidth: 0,
          padding: 5,
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "#48b",
              width: 2,
              type: "solid",
            },
            shadowStyle: {
              width: "auto",
              color: "rgba(150,150,150,0.3)",
            },
          },
          textStyle: {
            color: "#fff",
          },
        },
        toolbox: {
          show: true,
          orient: "horizontal", // 'horizontal' ¦ 'vertical'
          x: "90%", // 'center' ¦ 'left' ¦ 'right'¦ {number}
          y: "20", // 'center' ¦ 'left' ¦ 'right'¦ {number}
          color: ["#1e90ff", "#22bb22", "#4b0082", "#d2691e"],
          backgroundColor: "rgba(0,0,0,0)", // 工具箱背景颜色
          borderColor: "#ccc", // 工具箱边框颜色
          borderWidth: 0, // 工具箱边框线宽，单位px，默认为0（无边框）
          padding: 5, // 工具箱内边距，单位px，默认各方向内边距为5，
          itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
          itemSize: 16, // 工具箱图形宽度
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
          featureImageIcon: {}, // 自定义图片icon
          featureTitle: {
            mark: "辅助线开关",
            markUndo: "删除辅助线",
            markClear: "清空辅助线",
            dataZoom: "区域缩放",
            dataZoomReset: "区域缩放后退",
            dataView: "数据视图",
            lineChart: "折线图切换",
            barChart: "柱形图切换",
            restore: "还原",
            saveAsImage: "保存为图片",
          },
        },
        visualMap: {
          show: true,
          min: 0,
          max: 800,
          text: ["High", "Low"],
          x: "left",
          y: "center",
          realtime: false,
          calculable: true,
          left: "5%",
          bottom: "8%",
          textStyle: {
            color: "#000",
          },
          color: "#000",
          inRange: {
            color: [
              "#051B87",
              "#009EED",
              "#22DAF5",
              "#A6EFFF",
              "#F1F3FF",
              "#FEE3FF",
              "#E9A4FF",
              "#C269FF",
              "#C000FE",
            ],
          },
        },
        series: [
          {
            name: "地图",
            type: "map",
            map: "china",
            roam: true,
            zoom: 1,
            label: {
              show: true,
              color: "#fff",
              formatter: () => {
                return "";
              },
            },
            emphasis: {
              label: { show: true },
              itemStyle: {
                borderWidth: 2,
                borderColor: "#fff",
                areaColor: "#1789FB",
              },
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "#228FFE",
              areaColor: "#29498C",
            },
            data: [
              {
                name: "台湾",
                value: 111,
              },
            ],
          },
        ],
      },
      nameMap: {
        台湾: "taiwan",
        河北: "hebei",
        山西: "shanxi",
        辽宁: "liaoning",
        吉林: "jilin",
        黑龙江: "heilongjiang",
        江苏: "jiangsu",
        浙江: "zhejiang",
        安徽: "anhui",
        福建: "fujian",
        江西: "jiangxi",
        山东: "shandong",
        河南: "henan",
        湖北: "hubei",
        湖南: "hunan",
        广东: "guangdong",
        海南: "hainan",
        四川: "sichuan",
        贵州: "guizhou",
        云南: "yunnan",
        陕西: "shanxi1",
        甘肃: "gansu",
        青海: "qinghai",
        新疆: "xinjiang",
        广西: "guangxi",
        内蒙古: "neimenggu",
        宁夏: "ningxia",
        西藏: "xizang",
        北京: "beijing",
        天津: "tianjin",
        上海: "shanghai",
        重庆: "chongqing",
        香港: "xianggang",
        澳门: "aomen",
      },
    };
  },
  watch: {
    mapOptions: {
      deep: true,
      handler() {
        this.setOptions();
      },
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  mounted() {
    this.$nextTick(() => {
      this.mapOptions.backgroundColor
        ? (this.mapOption.backgroundColor = this.mapOptions.backgroundColor)
        : "";
      Object.assign(this.mapOption.title, this.mapOptions.title);
      Object.assign(this.mapOption.tooltip, this.mapOptions.tooltip);
      Object.assign(this.mapOption.toolbox, this.mapOptions.toolbox);
      Object.assign(this.mapOption.visualMap, this.mapOptions.visualMap);
      Object.assign(this.mapOption.series, this.mapOptions.series);

      this.mapOption.toolbox.show = this.mapOptions.showTool;
      this.mapOption.visualMap.show = this.mapOptions.showVisualMap;
      this.initChart();
    });
  },
  methods: {
    initChart() {
      const _myRefs = this.$refs[this.ref];
      this.chart = this.$echarts.init(_myRefs);
      this.setOptions();
      // 点击省，市
      this.chart.on("click", (val) => {
        const _province = val.name || "";
        const _pro = this.nameMap[_province] || "";
        if (!this.isGotoCity) {
          // 不下钻到市县
          this.$emit("proviceClick", val);
          return;
        }
        if (_pro) {
          // 点击省份
          const _proData = require(`./map/json/province/${this.nameMap[_province]}.json`);
          this.$echarts.registerMap(this.nameMap[_province], _proData);
          this.setOptions({
            map: this.nameMap[_province],
          });
          this.$emit("proviceClick", val);
        } else {
          //点击市县
          this.$emit("cityClick", val);
        }
      });
    },
    // 图形绘制
    setOptions(data) {
      let _series = this.mapOption.series;
      if (data && data.map) {
        _series[0].map = data.map;
        this.chart.setOption({
          series: _series,
        });
        return;
      }
      this.chart.setOption({
        backgroundColor: this.mapOption.backgroundColor,
        title: this.mapOption.title,
        tooltip: this.mapOption.tooltip,
        toolbox: this.mapOption.toolbox,
        visualMap: this.mapOption.visualMap,
        series: _series,
      });
    },
    // 点击全国
    chinaFun() {
      this.emit("chinaClick");
    },
  },
};
</script>
<style scoped lang="less"></style>
